<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>注册信息</title>

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <!--[if IE]>
  <script src="../js/html5shiv.min.js"></script>
  <![endif]-->

  <link href="../resource/style.css" rel="stylesheet" type="text/css">
  <script src="../resource/html5shiv.min.js"></script>
  <script src="../resource/jquery-2.1.4.js"></script>
  <script src="../resource/fastclick.js"></script>
  <script src="../resource/jquery-weui.js"></script>
  <script src="../resource/zepto.min.js"></script>
  <script src="../resource/picker.js"></script>
  <script src="../resource/picker-city.js"></script>
  <script>
    var count =1;
    $.weui = {};
    $.weui.alert = function(options){
      options = $.extend({title: '警告', text: '警告内容'}, options);
      var $alert = $('.weui_dialog_alert');
      $alert.find('.weui_dialog_title').text(options.title);
      $alert.find('.weui_dialog_bd').text(options.text);
      $alert.on('touchend click', '.weui_btn_dialog', function(){
        $alert.hide();
      });
      $alert.show();
    };

    // 允许上传的图片类型
    var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
    // 1024KB，也就是 1MB
    var maxSize = 102400 * 102400;
    // 图片最大宽度
    var maxWidth = 300;
    // 最大上传图片数量
    var maxCount = 6;

    apiready = function () {
      if(api.systemType == "ios"){
		   document.getElementById("statusBar").style.background = "#298cb4";
		}
      $api.fixStatusBar( $api.dom('header') );
      $('.js_file1').on('change', function (event) {
        loadPic(event,this);
      });
      $('.js_file2').on('change', function (event) {
        loadPic(event,this);
      });
      $('.js_file3').on('change', function (event) {
        loadPic(event,this);
      });
      $('.js_file4').on('change', function (event) {
        loadPic(event,this);
      });
      $('.js_file5').on('change', function (event) {
        loadPic(event,this);
      });
      $('.js_file6').on('change', function (event) {
        loadPic(event,this);
      });
      $("#filename0").val("身份证正面照");
      $("#filename1").val("身份证反面照");
      $("#filename2").val("手持身份证照");
      $("#filename3").val("营业执照");
      $("#filename4").val("正门照(含门牌)");
      $("#filename5").val("门牌照");
    }
    //@ sourceURL=pen.js

    function loadPic(event,node){
      var files = event.target.files;
      var file = files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);

      // 如果没有选中文件，直接返回
      if (files.length === 0) {
        return;
      }

      for (var i = 0, len = files.length; i < len; i++) {
        var file = files[i];
        var reader = new FileReader();

        // 如果类型不在允许的类型范围内
        if (allowTypes.indexOf(file.type) === -1) {
          $.weui.alert({text: '该类型不允许上传'});
          continue;
        }

        if (file.size > maxSize) {
          $.weui.alert({text: '图片太大，不允许上传'});
          continue;
        }

        if ($('.weui_uploader_file').length >= maxCount) {
          $.weui.alert({text: '最多只能上传' + maxCount + '张图片'});
          return;
        }

        reader.onload = function (e) {
          var img = new Image();
          img.onload = function () {
            // 不要超出最大宽度
            var w = Math.min(maxWidth, img.width);
            // 高度按比例计算
            var h = img.height * (w / img.width);
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            // 设置 canvas 的宽度和高度
            canvas.width = w;
            canvas.height = h;
            ctx.drawImage(img, 0, 0, w, h);
            var base64 = canvas.toDataURL('image/png');
//                            $("#img-111").src="data:image/png;base64,"+base64;
//                        $("#img-111").attr('src',"data:image/png;base64,"+base64);
            // 插入到预览区
            var $preview = $('<li   class="weui_uploader_file weui_uploader_status '+ node.className +'_statue" style="border-bottom:0px;height:135px;width:135px;background-image:url(' + base64 + ')"><div class="weui_uploader_status_content '+ node.className +'_content">0%</div></li>');
            $('.'+ node.className + '_show').html('');
            $('.'+ node.className + '_show').append($preview);
            $('.'+ node.className + '_show').show();
            $("."+ node.className + "_license").hide();
            var ba = base64.replace("data:image/png;base64,","");
            if(node.className.indexOf("1") >0){
              $("#filename0").hide();
              $("#pic1").val(ba);
            }else if(node.className.indexOf("2") >0){
              $("#filename1").hide();
              $("#pic2").val(ba);
            }else if(node.className.indexOf("3") >0){
              $("#filename2").hide();
              $("#pic3").val(ba);
            }else if(node.className.indexOf("4") >0){
              $("#filename3").hide();
              $("#jgpic1").val(ba);
            }else if(node.className.indexOf("5") >0){
              $("#filename4").hide();
              $("#jgpic2").val(ba);
            }else if(node.className.indexOf("6") >0){
              $("#filename5").hide();
              $("#jgpic3").val(ba);
            }

            count = count+1;
            var num = $('.'+ node.className +'_statue').length;
            $('.js_counter').text(num + '/' + maxCount);

            // 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传

            var progress = 0;
            function uploading() {
              $preview.find('.'+ node.className +'_content').text(++progress + '%');
              if (progress < 100) {
                setTimeout(uploading, 30);
              }
              else {
                // 如果是失败，塞一个失败图标
                //$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>');
                $preview.removeClass(node.className +'_status').find('.'+ node.className +'_content').remove();
              }
            }
            setTimeout(uploading, 30);
          };

          img.src = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    }

    function setDzid(e){
      $("#addrid").val(e);
    }
  </script>

  <style>
    .logo-license{margin-top:0px;}
    .left{font-weight:bold;}
    .info {margin-top: 5rem;}
    .btn-1 a {width: 90%;outline: none;border: none;background: #18b4ed;color: #fff;height: 5rem;line-height: 5rem;display: inline-block;border-radius: 0.4rem;font-size: 2rem;}
    .weui_cells_form input, .weui_cells_form label[for], .weui_cells_form textarea {-webkit-tap-highlight-color: rgba(0,0,0,0);}
    .weui_uploader_input {position: absolute;z-index: 1;top: 0;left: 0; width: 100%;height: 100%;opacity: 0;-webkit-tap-highlight-color: rgba(0,0,0,0);}
    .weui_uploader_input_wrp {float: left;position: relative;margin-right: 9px;margin-bottom: 9px;width: 77px;height: 77px;border: 1px solid #d9d9d9;}
    .weui_uploader_files {list-style: none;}
    .weui_uploader_file {font-size: 12px;color: #333;text-align: center;display: table-cell;vertical-align: middle;display: table;}
    .weui_uploader_file {float: left;margin-right: 9px;margin-bottom: 9px;width: 79px; height: 79px;background: no-repeat 50%;background-size: cover;}
    .info ul li .weui_uploader_files{width:99px;height:99px;}
    .js_file1_show,.js_file2_show,.js_file3_show,.js_file4_show,.js_file5_show,.js_file6_show{display:none;}
    #ssk{background-color:#FFFFFF;width: 93%;height: 5rem;font-size:2rem;}
    /*地址样式*/
    #divselect .all li{line-height:2rem;padding:5px 1rem;text-indent:0;}
    .half > a img {
      width: 11rem;
      height: 8rem;
       margin-left: 0rem;
       margin-top: 0rem;
    }
    .half > a{background:none;}
  </style>

</head>
<body>
<header id="statusBar">
  <img onclick="javascript :history.back(-1);" src="../resource/images/rpw_back_n.png"/>
  <span>信息注册</span>
  <div class="clear"></div>
</header>

<form id="form" method="post" enctype="multipart/form-data">
  <input name="jg_type" type="hidden" id="jg_type"/>
  <input name="gr_type" type="hidden" value="1"/>
  <input name="openid" type="hidden" />
  
    <input type="hidden" name="gr_pic1" id="pic1">
    <input type="hidden" name="gr_pic2" id="pic2">
    <input type="hidden" name="gr_pic3" id="pic3">
    <input type="hidden" name="jg_pic1" id="jgpic1">
    <input type="hidden" name="jg_pic2" id="jgpic2">
    <input type="hidden" name="jg_pic3" id="jgpic3">
    <!-- 存地址id -->
    <input type="hidden" name="jg_addrid" id="addrid">

  <article class="htmleaf-container">
    <div id="clipArea"></div>
    <div class="foot-use">
      <div class="uploader1 blue">
        <input type="button" name="file" class="button" value="打开"/>
        <input id="file" type="file" onchange="javascript:setImagePreview();" accept="image/*" multiple  />
      </div>
      <button id="clipBtn">截取</button>
    </div>
    <div id="view"></div>
  </article>

  <article class="info">
    <ul>
      <li>
          <div class="left">
            机构名称：
          </div>
          <div class="right">
            <input id="jg_name" name="jg_name" placeholder="请输入机构名称">
          </div>
        <div class="clear"></div>
      </li>
     
      <li>
        <div class="left">
          税   号:
        </div>
        <div class="right">
          <input id="taxcode" name="taxcode" placeholder="请输入税号">
        </div>
        <div class="clear"></div>
      </li>
     
      <li>
        <div class="left">
          机构地址：
        </div>
        <div class="right">
          <div class="mask"></div>
          <div id="divselect">
            <small>请选择单位地址</small>
            <ul class="all" id="dzxz">
              <li><input type="text" id="ssk" oninput="ssdz(this.value.trim())" placeholder="输入现居住地址或小区名字"/></li>
            </ul>
          </div>
          <input type="hidden" value="" id="inputselect"/>
        </div>
        <div class="clear"></div>
      </li>
      <li>
        <div class="left">
          机构类型:
        </div>
        <div class="right">
            <div class="mask"></div>
            <div id="divselectx">
              <small>请选择机构类型</small>
              <ul class="all">
                <li><a href="javascript:;" onclick="$('#jg_type').val(1);">商业店铺</a></li>
                <li><a href="javascript:;" onclick="$('#jg_type').val(2);">社区门卫</a></li>
                <li><a href="javascript:;" onclick="$('#jg_type').val(3);">物管公司</a></li>
                <li><a href="javascript:;" onclick="$('#jg_type').val(4);">物流企业</a></li>
                <li><a href="javascript:;" onclick="$('#jg_type').val(5);">房屋中介</a></li>
                <li><a href="javascript:;" onclick="$('#jg_type').val(6);">其他单位</a></li>
              </ul>
            </div>
            <input name="" type="hidden" value="" id="inputselectx"/>
          </div>
        <div class="clear"></div>
      </li>
      <li>
        <div class="left">
          负责人:
        </div>
        <div class="right">
          <input id="gr_name" name="gr_name" placeholder="输入负责人姓名">
        </div>
        <div class="clear"></div>
      </li>
      <li>
        <div class="left">
          手机号码:
        </div>
        <div class="right">
          <input id="phone" name="phone" placeholder="输入负责人手机号码">
        </div>
        <div class="clear"></div>
      </li>
      <li>
        <div class="left">
          身份证号:
        </div>
        <div class="right">
          <input id="idnum" name="idnum" placeholder="输入负责人身份证号码">
        </div>
        <div class="clear"></div>
      </li>

      
    
      <li>
        <div class="left">
          现居地址:
        </div>
        <div class="right">
          <input type="text" id="gr_xxdz" name="gr_xxdz" placeholder="输入负责人现居住的详址"/>
        </div>
        <div class="clear"></div>
      </li>
      <!--   --------照片 ------- -->
      <li>
        <section class="logo-license">
          <div class="half">
            <div class="uploader blue">
              <ul class="weui_uploader_files js_file1_show">
              </ul>
              <input type="text" id="filename0" class="filename" readonly/>
              <a class="license js_file1_license">
                <img id="img-1" src="../resource/images/logo_n.png"/>
              </a>
              <input type="file" name="pic1" class="js_file1" size="30" accept="image/*" capture="camera" />
            </div>
          </div>
          <div class="half" style="float:right;">
            <a class="logo" id="logox">
              <img id="bgl" src="../resource/images/id_card_zheng.jpg"/>
            </a>
            <p>示例图片</p>
          </div>
          <div class="clear"></div>
        </section>
      </li>
      <li>
        <section class="logo-license">
          <div class="half">
            <div class="uploader blue">
              <ul class="weui_uploader_files js_file2_show">
              </ul>
              <input type="text" id="filename1" class="filename" readonly/>
              <a class="license js_file2_license">
                <img id="img-1" src="../resource/images/logo_n.png"/>
              </a>
              <input id="file1" name="pic2" class="js_file2" type="file" size="30" accept="image/*" capture="camera" />
            </div>
          </div>
          <div class="half" style="float:right;">
            <a class="logo" id="logox">
              <img id="bgl" src="../resource/images/id_card_fan.jpg"/>
            </a>
            <p>示例图片</p>
          </div>
          <div class="clear"></div>
        </section>
      </li>

      <li>
        <section class="logo-license">
          <div class="half">
            <div class="uploader blue">
              <ul class="weui_uploader_files js_file3_show">
              </ul>
              <input  type="text" id="filename2" class="filename" readonly/>
              <a class="license js_file3_license">
                <img id="img-111" src="../resource/images/logo_n.png"/>
              </a>
              <input id="file0" name="pic3" class="js_file3" type="file" size="30" accept="image/*" capture="camera" />
            </div>
          </div>
          <div class="half" style="float:right;">
            <a class="logo" id="logox">
              <img id="bgl" src="../resource/images/id_card_quan.jpg"/>
            </a>
            <p>示例图片</p>
          </div>
          <div class="clear"></div>
        </section>
      </li>

      <li>
        <section class="logo-license">
          <div class="half">
            <div class="uploader blue">
              <ul class="weui_uploader_files js_file4_show">
              </ul>
              <input  type="text" id="filename3" class="filename" readonly/>
              <a class="license js_file4_license">
                <img src="../resource/images/logo_n.png"/>
              </a>
              <input name="pic4" class="js_file4" type="file" size="30" accept="image/*" capture="camera" />
            </div>
          </div>
          <div class="half" style="float:right;">
            <a class="logo" id="logox">
              <img id="bgl" src="../resource/images/yyzz.JPG"/>
            </a>
            <p>示例图片</p>
          </div>
          <div class="clear"></div>
        </section>
      </li>

      <li>
        <section class="logo-license">
          <div class="half">
            <div class="uploader blue">
              <ul class="weui_uploader_files js_file5_show">
              </ul>
              <input  type="text" id="filename4" class="filename" readonly/>
              <a class="license js_file5_license">
                <img src="../resource/images/logo_n.png"/>
              </a>
              <input name="pic5" class="js_file5" type="file" size="30" accept="image/*" capture="camera" />
            </div>
          </div>
          <div class="half" style="float:right;">
            <a class="logo">
              <img  src="../resource/images/qyzm.jpg"/>
            </a>
            <p>示例图片</p>
          </div>
          <div class="clear"></div>
        </section>
      </li>

      <li>
        <section class="logo-license">
          <div class="half">
            <div class="uploader blue">
              <ul class="weui_uploader_files js_file6_show">
              </ul>
              <input  type="text" id="filename5" class="filename" readonly/>
              <a class="license js_file6_license">
                <img src="../resource/images/logo_n.png"/>
              </a>
              <input name="pic5" class="js_file6" type="file" size="30" accept="image/*" capture="camera" />
            </div>
          </div>
          <div class="half" style="float:right;">
            <a class="logo">
              <img  src="../resource/images/qympz.jpg"/>
            </a>
            <p>示例图片</p>
          </div>
          <div class="clear"></div>
        </section>
      </li>

    </ul>
  </article>
  <article class="btn-1">

    <a onclick="tijiao()">注   册</a>
  </article>
</form>
</body>
<script>
  function check0() {
    var jg_name = document.getElementById("jg_name").value;
    var taxcode = $("#taxcode").val();
    console.info(taxcode);
    var gr_name = document.getElementById("gr_name").value;
    var phone = document.getElementById("phone").value;
    var idnum = document.getElementById("idnum").value;
    var gr_xxdz = document.getElementById("gr_xxdz").value;
    if (jg_name == null || jg_name == "") {
      alert("输入正确名称");
      return false;
    }

    if (taxcode != null && taxcode != "" && taxcode != undefined) {

    if (!(/^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(taxcode))) {//验证税号
      //  /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/
      alert("输入正确税号");
      return false;
    }
  }
    if(gr_name==null||gr_name==""){
      alert("输入负责人姓名");
      return false;
    }
    if(gr_xxdz==null||gr_xxdz==""||gr_xxdz.trim()==''){
      alert("请正确输入负责人现居住地详址");
      return false;
    }
    if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone))){//验证手机号
      alert("输入正确手机号");
      return false;
    }
    if(!(/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(idnum))){
      alert("请输入正确身份证号");
      return false;
    }
    if(document.getElementById("ssk").value==null||document.getElementById("ssk").value==""){
      alert("请选择地址");
      return false;
    }
    return true;
  }

  function check1(){
     if(document.getElementById("jgpic1").value==null||document.getElementById("jgpic1").value==""
          ||document.getElementById("jgpic2").value==null||document.getElementById("jgpic1").value==""
             ||document.getElementById("jgpic3").value==null||document.getElementById("jgpic1").value==""
             ||document.getElementById("pic1").value==null||document.getElementById("pic1").value==""
             ||document.getElementById("pic2").value==null||document.getElementById("pic2").value==""
             ||document.getElementById("pic3").value==null||document.getElementById("pic3").value==""){
       alert("请选择所有图片信息");
       return false;
     }
    return true;
  }

  function tijiao() {
//        $('#form').submit();
//        return;
    var a = check0();
    var b = check1();
    if(a&&b){
      jQuery.ajax({
        url:'<%=basePath%>ybss/qyjgxx.do',
        type:'post',
        data: $('#form').serialize(),
        dataType:'json',
        error:function(xhr, textStatus, errorThrown){
          console.log(xhr + "服务请求错误,请联系管理员【错误代码："+xhr.status+"】" + errorThrown);
        },
        success:function(data){
          if(data.flag == "Y"){

            alert("注册成功");
            
            //location.href='<%=basePath%>wx/ybss/register/all_reg.jsp';
          }else{

            alert("注册失败");
          }
        }
      });
    }
  }
</script>
<!-- 地址初始化用的 -->
<script type="text/javascript">
  $(function(){
    loadli();
  });
  function loadli(){
    jQuery.divselect = function(divselectid,inputselectid) {
      var inputselect = $(inputselectid);
      $(divselectid+" small").click(function(){
        $("#divselect ul").toggle();
        $(".mask").show();
      });
      $(divselectid+" ul li a").click(function(){
        var txt = $(this).text();
        $(divselectid+" small").html(txt);
        var value = $(this).attr("selectid");
        inputselect.val(value);
        $(divselectid+" ul").hide();
        $(".mask").hide();
        $("#divselect small").css("color","#333")
      });
    };
    $.divselect("#divselect","#inputselect");
  }
</script>
<script type="text/javascript">
  $(function(){
    loadxli();
  });
  function loadxli(){
    jQuery.divselectx = function(divselectxid,inputselectxid) {
      var inputselectx = $(inputselectxid);
      $(divselectxid+" small").click(function(){
        $("#divselectx ul").toggle();
        $(".mask").show();
      });
      $(divselectxid+" ul li a").click(function(){
        var txt = $(this).text();
        $(divselectxid+" small").html(txt);
        var value = $(this).attr("selectidx");
        inputselectx.val(value);
        $(divselectxid+" ul").hide();
        $(".mask").hide();
        $("#divselectx small").css("color","#333")
      });
    };
    $.divselectx("#divselectx","#inputselectx");
  }
</script>
<script type="text/javascript">
  $(function(){
    loadyli();
  });

  function loadyli(){
    jQuery.divselecty = function(divselectyid,inputselectyid) {
      var inputselecty = $(inputselectyid);
      $(divselectyid+" small").click(function(){
        $("#divselecty ul").toggle();
        $(".mask").show();
      });
      $(divselectyid+" ul li a").click(function(){

        var txt = $(this).text();
        $(divselectyid+" small").html(txt);
        var value = $(this).attr("selectyid");
        inputselecty.val(value);
        $(divselectyid+" ul").hide();
        $(".mask").hide();
        $("#divselecty small").css("color","#333")

      });
    };
    $.divselecty("#divselecty","#inputselecty");
  }

</script>
<script type="text/javascript">
  $(function(){
    $(".mask").click(function(){
      $(".mask").hide();
      $(".all").hide();
    })
    $(".right input").blur(function () {
      if ($.trim($(this).val()) == '') {
        $(this).addClass("place").html();
      }
      else {
        $(this).removeClass("place");
      }
    })
  });
</script>
</html>